---
title: Instala Astro manualmente
description: 'Cómo instalar Astro manualmente con NPM, PNPM, o Yarn.'
i18nReady: true
---
import Button from '~/components/Button.astro'
import { FileTree } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import ReadMore from '~/components/ReadMore.astro'

Esta guía te guíara paso a paso para instalar manualmente y configurar un nuevo proyecto de Astro si prefieres no usar la [la herramienta CLI automática](/es/install/auto/).

#### ¿Prefieres una forma más rápida de empezar?

<Button link="/es/install/auto/">Try the create astro CLI wizard →</Button>

#### Prerrequisitos

- **Node.js** - `v18.14.1` o mayor.
- **Editor de código** - Recomendamos [VS Code](https://code.visualstudio.com/) con nuestra [extensión oficial de Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **Terminal** - Astro es usado a través de la interfaz de línea de comandos (CLI).

#### Instalación

Si prefieres no usar el asistente de instalación automático `create astro`, puedes instalar y configurar Astro manualmente siguiendo las instrucciones a continuación:

## 1. Crea una carpeta donde guardar todos los archivos

Crea una carpeta vacía con el nombre de tu proyecto y navega hacia ella.

```bash
mkdir my-astro-project
cd my-astro-project
```

Ya en la carpeta, crea un archivo `package.json` para tu proyecto. Esto te ayudará a gestionar las dependencias del proyecto, incluyendo Astro. Si no estás familiarizado con este formato de archivo, ejecuta el siguiente comando para crear uno.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm init --yes
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm init
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn init --yes
  ```
  </Fragment>
</PackageManagerTabs>

## 2. Instala Astro

Primero, instala Astro dentro de tu proyecto.

:::note[Importante]
Astro debe ser instalado localmente, no globalmente. Asegúrate de *no* ejecutar `npm install -g astro`, `pnpm add -g astro` o `yarn add global astro`.
:::

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add astro
  ```
  </Fragment>
</PackageManagerTabs>

A continuación, reemplaza los scripts creados por defecto en el `package.json` por los siguientes:

```json title="package.json" del={2} ins={3-6}
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
```

Los scripts serán usados más adelante en la guía para iniciar y ejecutar diferentes comandos en Astro.

## 3. Crea tu primera página

En tu editor de código, crea un nuevo archivo en el directorio `src/pages/index.astro`. Esta será tu primera página de Astro en el proyecto.

Copia y pega el siguiente fragmento de código (incluyendo `---` guiones) en tu nuevo archivo:

```astro title="src/pages/index.astro"
---
// ¡Bienvenido a Astro! Todo entre los guiones triples son los
// "metadatos de tu componente". Nunca se ejecuta en el navegador.
console.log('¡Esto se ejecuta en tu terminal y no en el navegador!');
---
<!-- El código de abajo es "la plantilla de su componente". Es solo HTML
     con un poco de magia que te ayudará a crear la plantilla del componente. -->
<html>
  <body>
    <h1>¡Hola Mundo!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>
```

## 4. Crea tu primer archivo estático

Crea una carpeta `public` en la raíz de tu proyecto para almacenar todos los archivos estáticos. Astro incluirá estos archivos en la compilación final, así podrán ser referenciados de forma segura desde tus componentes.

Crea un nuevo archivo en el directorio `public/robots.txt`. `robots.txt` es un archivo que informa a los robots de búsqueda, como Google, sobre cómo indexar tu página web.

Copia y pega el siguiente fragmento de código:

```diff title="public/robots.txt"
# Ejemplo: Permitir a todos los bots de búsqueda escanear e indexar el sitio web.
# Sintaxis completa: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /
```

## 5. Crea astro.config.mjs

Astro es configurado usando el archivo `astro.config.mjs`. Este archivo es opcional si no necesitas configurar Astro, pero recomendamos crear uno ahora.

Crea un archivo `astro.config.mjs` en la raíz del proyecto y copia el siguiente código dentro de él:

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({});
```

Si deseas incluir [componentes de frameworks](/es/guides/framework-components/) como React, Svelte, etc.; o usar otras herramientas de desarrollo como Tailwind o Partytown en tu proyecto, lee nuestra [guía de integraciones](/es/guides/integrations-guide/).

<ReadMore>Lee nuestra guía de [configuración de API](/es/reference/configuration-reference/) para más información.</ReadMore>

## 6. Agrega soporte para TypeScript

TypeScript es configurado usando `tsconfig.json`. Aun si tú no escribes código en TypeScript, este archivo es importante para que herramientas como Astro y VS Code sepan cómo comprender tu proyecto. Algunas características (como importaciones de paquetes npm) no tienen un soporte completo en el editor sin el archivo `tsconfig.json`.

Si pretendes escribir código en TypeScript, recomendamos usar las plantillas de Astro `strict` o `strictest`. Puedes ver y comparar las tres configuraciones de las plantillas en [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/).

Crea un archivo `tsconfig.json` en la raíz del proyecto y copia el siguiente código dentro de él. (Puedes usar `base`, `strict` o `strictest` para tu maquetado de TypeScript):

```json title="tsconfig.json" "base"
{
  "extends": "astro/tsconfigs/base"
}
```

Finalmente, crea un archivo `src/env.d.ts` para que TypeScript infiera los tipos disponibles en un proyecto de Astro.

```ts title="src/env.d.ts"
/// <reference types="astro/client" />
```

<ReadMore>Lee nuestra [guía para configurar TypeScript](/es/guides/typescript/#configuración) para más información.</ReadMore>

## 7. Siguientes pasos

Si has seguido las instrucciones anteriores, el proyecto debe lucir así:

<FileTree>
- node_modules/
- public/
  - robots.txt
- src/
  - pages/
    - index.astro
  - env.d.ts
- astro.config.mjs
- package-lock.json or `yarn.lock`, `pnpm-lock.yaml`, etc.
- package.json
- tsconfig.json
</FileTree>

¡Felicidades, estás listo para empezar a usar Astro!

Si has seguido todo el proceso, puedes ir directamente al [Paso 2: Inicia Astro](/es/install/auto/#2-inicia-astro-) para continuar y aprender cómo ejecutar Astro por primera vez.
